<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	body, html, #locationmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script src="res/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>百度地图显示多点位置并连线</title>
</head>
<body>
	<div id="locationmap"></div>
</body>
</html>
<script type="text/javascript">

var map = new BMap.Map("locationmap");			// 百度地图API功能
map.centerAndZoom("杭州市", 14);					// 设置地图显示的城市和地图级别
map.enableScrollWheelZoom();					// 启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();						// 启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl());	// 添加默认缩放平移控件
map.addControl(new BMap.ScaleControl());		// 添加比例尺控件
map.addControl(new BMap.MapTypeControl());		// 添加地图类型控件
map.addControl(new BMap.OverviewMapControl());	// 添加缩略地图控件
/*
$(function(){
	search();
})

function search()
{
	jQuery.ajax({
		url : 'location.do?action=map&userid=1',
		data : jQuery('#searchForm').serialize(),
		type : "post",
		cache : false,
		success : function(data) {
			var result = eval('(' + data + ')');
			if(result.length==0)
			{
				alert('没有坐标位置数据');
			}
			alert(result);
			map.clearOverlays();									// 清除标注信息
		    var points = [];										// 添加折线运动轨迹
			for(i=0;i<result.length;i++)
		    {
				var userid = result[i].userid;						// 用户ID
		    	var longitude = result[i].longitude;				// 经度
		    	var latitude = result[i].latitude;					// 纬度
		    	var address = result[i].address;					// 地点
		    	var sign_time = result[i].datetime;					// 签到时间

		    	var point = new BMap.Point(longitude, latitude);	// 填充标注点
		    	if(i==0)
		    	{
		    		map.setCenter(point);							// 设置中心坐标
		    	}
		    	var tips = userid + "，" + sign_time + "，" + address;
		    	addMarker(point, map, tips);
		    	points.push(point);
		    }
			var polyline = new BMap.Polyline(points);
			map.addOverlay(polyline); 								//绘制曲线
		}
	});
	return false;
}

//编写自定义函数,创建标注
function addMarker(point, map, tips)
{
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
	//为标注添加文字信息
	var label = new BMap.Label(tips,{offset:new BMap.Size(20,-10)});
	marker.setLabel(label);
}
*/
/*
var data = [
    [119.307268,26.087294],
    [119.300908,26.085607],
    [119.299399,26.089598],
    [119.305363,26.092161]
];
*/

var result;

$(function(){
    jQuery.ajax({
        url: 'location.do?action=map&userid=1',
        async: false,
        data: jQuery('#searchForm').serialize(),
        type: "post",
        cache: false,
        success: function (data) {
            result = eval('(' + data + ')');

        }
    })
//alert("111");
    /////////
    showMap();})


function showMap() {
    var abc = $(result);

    var chartData = [];


    for(i=0;i<abc.length;i++) {


        chartData.push(new BMap.Point(result[i].longitude, result[i].latitude));
        //alert(result[i].longitude);
        //alert(result[i].latitude);
    }
    for ( var i = 0; i < chartData.length ; i++) {
        var startPoint = chartData[i];
        var endPoint = chartData[i + 1];
        showPath(startPoint, endPoint, i == 0, i == chartData.length-2);
    }
}

// 两个坐标点连线
function showPath(startPoint, EndPoint, displayStartIcon, displayEndIcon) {

    var walking = null;
    if (displayStartIcon && !displayEndIcon) { // 第一个起点只展示起点图标
        walking = new BMap.DrivingRoute(map, {
            renderOptions : {
                map : map,
                autoViewport : true
            },
            onMarkersSet : function(routes) {
                map.removeOverlay(routes[1].marker);
            }
        });
    } else if (!displayStartIcon && !displayEndIcon) {//中间的起点终点不展示起点、终点图标
        walking = new BMap.DrivingRoute(map, {
            renderOptions : {
                map : map,
                autoViewport : true
            },
            onMarkersSet : function(routes) {
                map.removeOverlay(routes[0].marker);
                map.removeOverlay(routes[1].marker);
            }
        });
    } else {// 最后一个终点只展示终点图标
        walking = new BMap.DrivingRoute(map, {
            renderOptions : {
                map : map,
                autoViewport : true
            },
            onMarkersSet : function(routes) {
                map.removeOverlay(routes[0].marker);
            }
        });
    }

    walking.search(startPoint, EndPoint);
}
</script>
